<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="./css/topsearch.css">
<link rel="stylesheet" type="text/css" href="./css/footer.css">
<link rel="stylesheet" type="text/css" href="css/index_search.css">

<script src="./jquery/jquery-1.11.2.min.js"></script>
<script src="./bootstrap/js/bootstrap.js"></script>
<!-- <script src="./js/topsearch.js"></script> -->
<script src="./js/index_search.js"></script>
<script src="./js/template.js"></script>
<body>	
	<div class="body">
		<div class="container">
			<!-- search start -->
	   		<div class="top">  
			    <header class="container head">
			        <div class="row">
			            <div class="col-sm-10">
			                <ul class="nav nav-pills">
			                    <li role="presentation"><a href="#">aDaily Deals</a></li>
			                    <li role="presentation"><a href="./sell.html">Sell</a></li>
			                    <li role="presentation"><a href="#">Help & Contact</a></li>
			                </ul>
			            </div>
			            <div class="col-sm-2 topright">
			                <ul class="nav nav-pills"  style="width: 188px">
			                    <li role="presentation" class="dropdown init" >
			                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
			                          My eBay<span class="caret"></span>
			                        </a>
			                        <ul class="dropdown-menu">
			                          <li><span class="glyphicon glyphicon-user"></span> <a href="./login_regist.html" style="display: inline-block">login</a></li>
			                           <li><span class="glyphicon glyphicon-user"></span> <a href="./watchlist.html" style="display: inline-block">watchlist</a></li>
			                        </ul>
			                    </li>
			                    <li role="presentation" class="dropdown logined" style="display: none">
			                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
			                          Hi <i class="username"></i><span class="caret"></span>
			                        </a>
			                        <ul class="dropdown-menu">
			                          <li><span class="glyphicon glyphicon-user"></span> <a href="./watchlist.html" style="display: inline-block">Settings</a></li>
			                          <li> <span class="glyphicon glyphicon-log-out"></span><a href="javascript:void(0)" style="display: inline-block" onclick="logout()">Logout</a></li>
			                        </ul>
			                    </li>
			                    <li role="presentation"><a href="#"><span class="glyphicon glyphicon-bell"></span></a></li>
			                    <li role="presentation"><a href="#"> <span class="glyphicon glyphicon-shopping-cart"></span></a></li>
			                </ul>
			            </div>
			        </div>
			    </header>
			</div>
	   		<div class="row search">
				<div class="col-sm-1 col-sm-offset-1">
					<img src="image/logo.png">
				</div>
				<div class="col-sm-1" style="width:120px">
					<ul class="nav navbar-nav"  style="margin-top:-5px">
				        <li class="dropdown">
				          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Categary <span class="caret"></span></a>
				          <ul class="dropdown-menu">
				            <li><a href="#">Action</a></li>
				            <li><a href="#">Another action</a></li>
				            <li><a href="#">Something else here</a></li>
				            <li role="separator" class="divider"></li>
				            <li><a href="#">Separated link</a></li>
				          </ul>
				        </li>
				    </ul>
				</div>
				<div class="col-sm-5">
					<form class="form-inline">
						<div class="form-group">
						    <div class="input-group" style="display: flex;">
						      	<input type="text" class="form-control" id="exampleInputAmount" style="width:420px">
							    <div class="input-group-btn">
							        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width:100px">Global <span class="caret"></span></button>
							        <ul class="dropdown-menu dropdown-menu-right">
							          <li><a href="#">America</a></li>
							          <li><a href="#">Great Britain</a></li>
							          <li><a href="#">Deutschland</a></li>
							          <li role="separator" class="divider"></li>
							          <li><a href="#">Global</a></li>
							          <li><a href="#">Europe</a></li>
							        </ul>
							    </div><!-- /btn-group -->
							</div>	
						</div>
					</form>
				</div>
				<div class="col-sm-2">
					<button type="button" class="btn btn-primary sub" style="width:150px;margin-left: 45px">Search</button>
				</div>
				<div class="col-sm-1" style="margin-top: 5px;margin-left: 20px">Advanced</div>
			</div>
		    <!-- search end -->
		    <div class="row" style="margin-top: 20px;">
		    <!-- left start -->
				<div class="col-sm-2 left">
					<div class="first">
						<p class="title">Categories</p>
						<p><a href="#">Colloectibles</a></p>
						<p><a href="#">Stamps</a></p>
						<p><a href="#">Books</a></p>
						<p><a href="#">Art</a></p>
					</div>
					<div class="second">
						<p class="title">Cuaranteed Delivery</p>
						<div class="radio">
							<label>
							   <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
							    1 Day Shipping
							</label>
						</div>
						<div class="radio">
							<label>
							   <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
							   2 Day Shipping
							</label>
						</div>
						<div class="radio">
							<label>
							   <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
							    3 Day Shipping
							</label>
						</div>	
					</div>
					<div class="third">
						<p class="title">Condition</p>
						<div class="checkbox">
						  	<label>
						    	<input type="checkbox" value="" checked>New
						  	</label>
						</div>
						<div class="checkbox disabled">
						  	<label>
						    	<input type="checkbox" value="" disabled>Used
						  	</label>
						</div>
					</div>
					<div class="forth">
						<p class="title">Price</p>
						<div class="row">
							 <div class="dropdown col-sm-4">
					          	<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Price <span class="caret"></span></a>
					          	<ul class="dropdown-menu">
						            <li><a href="#">USD$</a></li>
						            <li><a href="#">GBP￡</a></li>
						            <li><a href="#">RMB￥</a></li>
						            <li role="separator" class="divider"></li>
						            <li><a href="#">EUR€</a></li>
						          </ul>
					        </div>
					        <div class="col-sm-8">
					        	<input type="text" name="" style="width:50px;">~
					        	<input type="text" name="" style="width:50px;">
					        </div>
						</div>
						 <p style="margin-top: 20px;">Recently viewed items</p>
					</div>
					<div class="fifth">
						<div>
							<img src="image/s-l140.jpg">
							<p><a href="#">CHINA NANKIN...</a></p>
							<p>RMB 85.96</p>
						</div>
						<div style="margin-top: 20px;">
							<img src="image/s-l141.jpg">
							<p><a href="#">CHINA NANKIN...</a></p>
							<p>RMB 85.96</p>
						</div>
						
					</div>
				</div>
		    <!-- left end -->
		    <!-- center start -->
		    	<div class="col-sm-8 center" style="padding:20px;">
		    		<div class="row">
		    			<div class="col-sm-5">
		    				<div class="btn-group" role="group" aria-label="...">
							  <button type="button" class="btn btn-default">All Listings</button>
							  <button type="button" class="btn btn-default">Action</button>
							  <button type="button" class="btn btn-default">Buy It Now</button>
							</div>
		    			</div>
		    			<div class="col-sm-3 col-sm-offset-1">
		    				<div class="">
							    <span>Sort:</span>
							    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width:100px">Global <span class="caret"></span></button>
						        <ul class="dropdown-menu dropdown-menu-right">
						          <li><a href="#">America</a></li>
						          <li><a href="#">Great Britain</a></li>
						          <li><a href="#">Deutschland</a></li>
						          <li role="separator" class="divider"></li>
						          <li><a href="#">Global</a></li>
						          <li><a href="#">Europe</a></li>
						        </ul>
							</div>
		    			</div>
		    			<div class="col-sm-3">
		    				<div class="">
							    <span>View:</span>
							    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width:100px"><span class="glyphicon glyphicon-th-list"></span> <span class="caret"></span></button>
						        <ul class="dropdown-menu dropdown-menu-right">
						          <li><a href="#"><span class="glyphicon glyphicon-th-large"></span>Gallery</a></li>
						        </ul>
							</div>
		    			</div>
		    		</div>
		    		<div class="lists">
						<div class="row" style="margin-top: 15px;">
							<div class="col-sm-4">
								<p><span>1582</span> result for <a href="#"><span class="glyphicon glyphicon-pushpin">Save this search</span></a></p>
							</div>
							<div class="col-sm-2 col-sm-offset-4" style="font-weight: 600;">
								<p>Best seller</p>
								
							</div>
							<div class="col-sm-2">
								<canvas id="c" width="55" height="30"></canvas>
							</div>
						</div>
						<div class="row" style="border-top:1px solid lightgray;padding-top:10px;padding-bottom: 10px">
							<div class="col-sm-3">
								<img class="img" src="./image/s-l225.jpg" style="width:100%;height: 160px;">
							</div>
							<div class="col-xs-8 col-xs-offset-1">
								<p style="color:skyblue;font-size: 16px;" onclick="showdetail({{v.sid}})">Ministers in Waiting,Ming Tombs,Manking,China Nanjing c1910s intage Postcard</p>
								<div class="row">
									<div class="col-sm-4">
										<p style="font-weight:600"><span>RMB</span> <span> 50.68</span></p>
										<p style="font-size: 12px;color:lightgray">Buy it now</p>
									</div>
									<div class="col-sm-6">
										<p style="font-weight:600">Jun-05 13:53</p>
											<img src="./image/pal.png">
									</div>
								</div>
							</div>	
						</div>	
						<div class="row" style="border-top:1px solid lightgray;padding-top:10px;padding-bottom: 10px">
							<div class="col-sm-3">
								<img class="img" src="./image/s-l201.jpg" style="width:100%;height: 160px;">
							</div>
							<div class="col-xs-8 col-xs-offset-1">
								<p style="color:skyblue;font-size: 16px;" onclick="showdetail({{v.sid}})">Ministers in Waiting,Ming Tombs,Manking,China Nanjing c1910s intage Postcard</p>
								<div class="row">
									<div class="col-sm-4">
										<p style="font-weight:600"><span>RMB</span> <span> 50.68</span></p>
										<p style="font-size: 12px;color:lightgray">Buy it now</p>
									</div>
									<div class="col-sm-6">
										<p style="font-weight:600">Jun-05 13:53</p>
											<img src="./image/pal.png">
											<img src="./image/vis.png">
									</div>
								</div>
							</div>	
						</div>				
		    		</div>
		    		<!-- 分页 -->
		    		<nav aria-label="Page navigation" style="text-align: center;margin-top: 30px">
					  <ul class="pagination">
					    <li class='disabled'><span><span aria-hidden='true'>&laquo;</span></span></li>
					    <li><span>1<span class='sr-only'>(current)</span></span></li>
					    <li><span>2<span class='sr-only'>(current)</span></span></li>
					    <li><span>3<span class='sr-only'>(current)</span></span></li>
					    <li class='disabled'><span><span aria-hidden='true'>&raquo;</span></span></li>
					  </ul>
					</nav>
		    	</div>
		    <!-- center end  -->
		    <!-- right start -->
		    	<div class="col-sm-2 right">
		    		<img src="image/ads.jpg">
		    	</div>
		    <!-- right end -->
		    </div>
		</div>
		<footer class="footer ">
		  <div>
		    <a href="#"> <span class="text-muted">About eBay</span></a>
		    <a href="#"> <span class="text-muted">Announcements</span></a>
		    <a href="#"> <span class="text-muted">Security Center</span></a>
		    <a href="#"><span class="text-muted">Resolution Center</span></a>
		    <a href="#"> <span class="text-muted">Seller Information Center</span></a>
		    <a href="#"> <span class="text-muted">Polices</span></a>
		    <a href="#"><span class="text-muted">Affiliates</span></a>
		    <a href="#"><span class="text-muted">Help & Contact</span></a>
		    <p class="copy">Copyright&copy;1995-2018 eBay Inc.All Right Reserved.
		      <a class="text-muted" href="#"> <u>Accessibility</u></a>,
		      <a class="text-muted" href="#"><u> User agreement</u>   </a>,
		      <a class="text-muted" href="#"><u>Privacty</u> </a>,
		      <a class="text-muted" href="#"><u>Cookies</u>     </a>
		          and
		      <a class="text-muted" href="#"><u>AdChoice</u> </a>
		      <span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="right" title="Tooltip on right"></span>
		    </p>
		  </div>
		</footer>
	</div>
</body>